<template>
  <el-header id="navtop">
    <div class="logo">
      <img src="../assets/mange_logo.png" alt="Logo" />
    </div>
    <h1 class="title">最牛逼的后台管理系统</h1>
    <div class="user">
      <el-tooltip class="box-item" effect="customized" content="点击更换头像" placement="bottom">
        <img id="head_img" v-if="image" :src="image" alt="" @click="up_head_img = true">
        <img id="head_img" v-else src="../assets/null_image.jpg" alt="" @click="up_head_img = true">
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link" style="outline: 0;cursor: pointer;">
          用户:{{ username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="edit_info">修改个人信息</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
  <el-dialog v-model="up_head_img" title="点击图片更换头像" width="20%" style="text-align: center;">
    <el-upload class="avatar-uploader" :show-file-list="false" :before-upload="beforeAvatarUpload"
      :http-request="update_image">
      <img v-if="image" :src="image" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue"
import * as qiniu from 'qiniu-js'
import { ElMessage } from "element-plus";
import axios from '@/utils/http.js'
let up_head_img = ref(false)
import { useRouter } from "vue-router"
let router = useRouter()
let username = localStorage.getItem('username')
let image = ref('')
onMounted(() => {
  get_image()
})
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传的图片格式必须为JPG或PNG！')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB！')
    return false
  }
  return true
}
function update_image(file) {
  console.log(file.file.name);
  axios({
    url: 'user/edit_image/',
    method: 'POST',
  }).then(res => {
    console.log("token>>>>", res.data.token);
    if (res.data.code == 200) {
      const observer = {
        error(err) {
          // 失败
          ElMessage.warning('上传失败')
        },
        complete(res) {
          change_img(res.key)
        }
      }
      const observable = qiniu.upload(file.file, file.file.name, res.data.token)
      const subscription = observable.subscribe(observer)
    }
  })
}
function change_img(key) {
  axios({
    url: 'user/edit_image/',
    method: 'PUT',
    data: {
      key: key
    }
  }).then(res => {
    if (res.data.code == 200) {
      image.value = res.data.url
      ElMessage.success('修改成功')
    } else {
      ElMessage.warning(res.data.msg)
    }
  })
}

function logout() {
  localStorage.clear()
  router.push('/login')
}
const edit_info = () => {
  router.push('/edit_oneself')
}
function get_image() {
  axios({
    url: 'user/edit_image/',
    method: 'GET'
  }).then(res => {
    image.value = res.data.headImage
  })
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  border-radius: 0;
  display: block;
}

#c_image {
  width: 200px;
  height: 200px;
  border-radius: 15px;
}

#tips {
  position: absolute;
  width: 150px;
  height: 30px;
  left: -20px;
  top: 50px;
  color: gray;
  display: none;
}

#head_img:hover+#tips {
  display: block;
}

#head_img:hover {
  cursor: pointer;
}

#navtop {
  background-color: #5fbfff;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

img {
  width: 50px;
  border-radius: 50px;
}

.logo {
  float: left;
}

.title {
  margin-left: 20px;
  text-align: center
}

.user {
  float: right;
  position: relative;
}

.user span {
  color: #f5f5f5;
  font-size: 16px;
  line-height: 50px;
}

.user-info {
  display: inline-block;
  vertical-align: middle;
}
</style>
<style>
.el-popper.is-customized {
  padding: 6px 12px;
  background-color: #5fbfff;
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: #5fbfff;
  right: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>